<template>
  <div>
    <!-- 筛选条件 -->
    <el-form
      ref="srarchForm"
      :inline="true"
      :model="searchMap"
      class="demo-form-inline"
      style="margin-top:20px;"
    >
      <!-- 重置要看el-form-item组件元素的prop属性上是否指定了字段名，重置才能生效 -->
      <el-form-item prop="name">
        <el-input v-model="searchMap.name" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="searchMap.code" placeholder="商品编码"></el-input>
      </el-form-item>
      <el-form-item prop="supplierName">
        <el-input v-model="searchMap.supplierName"
        @click.native="dialogSupplierVisible = true"
         placeholder="选择供应商" readonly></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="fetchData" icon="el-icon-search" size="small">查询</el-button>
        <el-button type="primary" round @click="handleAdd" icon="el-icon-edit" size="small">增加</el-button>
        <el-button type="info" round plain @click="resetForm('srarchForm')" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据展示 -->
    <el-table :data="goodsList" height="420" style="width: 100%">
      <el-table-column prop="index" label="序号" type="index" width="60"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="code" label="商品编码" width="120"></el-table-column>
      <el-table-column prop="spec" label="商品规格"></el-table-column>
      <el-table-column prop="retailPrice" label="零售价"></el-table-column>
      <el-table-column prop="purchasePrice" label="进货价"></el-table-column>
      <el-table-column prop="storageNum" label="库存数量"></el-table-column>
      <el-table-column prop="supplierName" label="供应商"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 选择供应商对话框 -->
    <el-dialog title="选择供应商" :visible.sync="dialogSupplierVisible" width="500px">
      <!-- 通过属性绑定的方式:isDialog ='true' 向子组件传递数据 -->
      <supplier :isDialog ='true'></supplier>
    </el-dialog>
  </div>
</template>
<script>
import goodsApi from "@/api/goods.js";
import Supplier from "@/views/supplier/index.vue"; //导入供应商的页面组件，进行页面复用
export default {
  // 注册Supplier组件，进行引入
  components: { Supplier },
  data() {
    return {
      goodsList: [],
      total: 0,
      currentPage: 1,
      pageSize: 20,
      searchMap: {
        code: "",
        name: "",
        supplierName: ""
      },
      dialogSupplierVisible: false //弹出选择供应商对话框
    };
  },
  created() {
    this.fetchData(this.currentPage, this.pageSize, this.searchMap);
  },
  methods: {
    fetchData(page, size, searchMap) {
      goodsApi.getgoodsListPage(page, size, searchMap).then(response => {
        const List = response.data;
        this.goodsList = List.rows;
        this.total = List.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.fetchData(this.currentPage, this.pageSize, this.searchMap);
    },
    handleCurrentChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = val;
      this.fetchData(this.currentPage, this.pageSize, this.searchMap);
    },
    //点击增加按钮
    handleAdd() {},
    //重置按钮
    resetForm(formName) {
      //重置要看el-form-item组件元素的prop属性上是否指定了字段名，重置才能生效
      this.$refs[formName].resetFields();
    }
  }
};
</script>